<template>
  <div class="pages details">
    <div class="tips">
      <img src="../../assets/images/tips.png" alt="tips">本服务由诺诺网极速开票提供
    </div>
    <div class="boxState">
      <div class="state">
        <p class="state_title">发票已预约</p>
        <p class="state_details">
          <i> 发票类型：</i>
          <span v-if="data.invoiceType==1" >增值税专用发票（纸质）</span>
          <span v-if="data.invoiceType==2">增值税专用发票</span>
        </p>
        <p class="state_details">
          <i>金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额：</i>¥{{data.invoiceAmount}}（以实际消费为准）</p>
      </div>
    </div>
    <div class="dest">发票由酒店开具，您的发票信息已发送给酒店，请根据预约时间，在酒店前台领取发票</div>
    <div class="detail">
      <div class="title">发票信息</div>
      <div class="detail_cells">
        <div class="cell">
          <div class="cell_left">公司名称</div>
          <div class="cell_right">{{data.companyTitle}}</div>
        </div>
        <div class="cell" v-if="data.invoiceType==1 && data.titleType ==1 ">
          <div class="cell_left">公司税号</div>
          <div class="cell_right">{{addedInfo.taxNo}}</div>
        </div>
        <div v-if="data.invoiceType==2">
          <div class="cell">
            <div class="cell_left">注册地址</div>
            <div class="cell_right">{{addedInfo.registerAddr}}</div>
          </div>
          <div class="cell">
            <div class="cell_left">注册电话</div>
            <div class="cell_right">{{addedInfo.tel}}</div>
          </div>
          <div class="cell">
            <div class="cell_left">开户银行</div>
            <div class="cell_right">{{addedInfo.openingBank}}</div>
          </div>
          <div class="cell">
            <div class="cell_left">开户账号</div>
            <div class="cell_right">{{addedInfo.accountNo}}</div>
          </div>
        </div>
        <div class="cell">
          <div class="cell_left">发票项目</div>
          <div class="cell_right">{{data.invoiceItemIndex}}</div>
        </div>
        <div class="cell">
          <div class="cell_left">领取时间</div>
          <div class="cell_right">{{data.accDate}}</div>
        </div>
      </div>
    </div>
    <div class="btns">
      <button class="edit" @click="edit">修改</button>
      <button class="cannel" @click="cannel">取消</button>
    </div>
  </div>
</template>
<script>
import { Confirm} from 'vux'
import store from 'storejs';
import qs from 'Qs'
export default {
  data () {
    return {
      secrt:this.$route.query.secrt ||'',
      details:{},
      data:{},
      addedInfo:{},
      invoiceTp:''
    }
  },
  components: {
    Confirm
  },
  created(){
    if(this.secrt!=''){
        this.$http.post(server.index().getDetailsInfoById,qs.stringify({secrt: this.secrt})).then((response) => {
          var datas = response.data;
          // console.log(datas)
          this.data=datas.result;
          this.addedInfo = datas.result.addedInfo;
          // console.log(this.data.invoiceItem)
        }, (response) => {
          this.$vux.toast.show({
            type:'text',
            width:'70%',
            text: '信息获取失败'
          })
        });
    }else{

    }
    //var oldData = store('oldData');
    var details = store('details')
    // console.log(this.secrt)
    //this.data=oldData;
    this.details = details
    // console.log(oldData)
  },
  methods:{
    cannel:function(){
      var that = this
      this.$vux.confirm.show({
        content: '取消后订单将被删除，确认取消么？',
        confirmText:'确认取消',
        cancelText:'关闭',
        onCancel:function(){
          // console.log('关闭')
        },
        onConfirm:function(){
          //that.$router.push({path:'/index'});
          // console.log('确定',that.secrt);
          that.$http.post(server.details().delInvoiceInfo,qs.stringify({secrt:that.secrt})).then((response) => {
            var datas = response.data;
            
            if(datas.code=='S0000'){
              that.$vux.toast.show({
                type:'text',
                width:'70%',
                text: '删除成功'
              })
              setTimeout(function(){
                that.$vux.toast.hide();
                that.$router.push({path:'/index?secrt='+that.details.secrt+'&sellName='+that.details.sellName});
              },1500)
            }else{
              that.$vux.toast.show({
                type:'text',
                width:'70%',
                text: datas.describe
              })
            }
          }, (response) => {
            that.$vux.toast.show({
              type:'text',
              width:'70%',
              text: '信息获取失败'
            })
          });
        }
      })
    },
    edit:function(){
      var that = this
      this.$vux.confirm.show({
        content: '确认修改么？',
        confirmText:'确认',
        cancelText:'关闭',
        onCancel:function(){
          // console.log('关闭')
        },
        onConfirm:function(){
          that.$router.push({path:'/index?secrt='+that.details.secrt+'&sellName='+that.details.sellName});
          // console.log('确定',that.id);
          
        }
      })
    }
  }
}
</script>
<style scoped lang='less'>
.details{
  font-size: 14px;
  color: #666666;
  .tips{
    padding: 8px 15px;
    line-height: 1;
    img{
      vertical-align: middle;
      width: 14px;
      height: 14px;
      margin-right:5px; 
    }
  }
  .boxState{
    background: #06C1AE;
    width:100%;
    padding: 15px 15px;
    .state_title{
      font-size: 18px;
      color:#ffffff;
      line-height: 1.2;
      margin-bottom: 5px;
    }
    .state_details{
      color: rgba(255,255,255,0.80);      
      line-height: 1.8;
      i{
        width: 75px;
        display: inline-block;
        font-style: normal;
        text-align:justify;
      }
    }
  }
  .dest{
    padding: 14px 12px;
    background: #fff;
    line-height: 16px;
    color: #666666;
  }

  .detail{
    margin-top: 10px;
    background: #fff;
    padding-bottom: 10px;
    .title{
       padding: 10px 12px;
    }
    .cell{
      padding: 4px 15px;
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      .cell_left{
        display: block;
        width: 65px;
        word-wrap: break-word;
        word-break: break-all;
        font-size: 12px;
        color: #999999;
      }
      .cell_right{
        flex:1;
        font-size: 12px;
        color: #151515;
      }
    }
  }
  .btns{
    padding: 10px 11px;
    button{
      &:first-child{
        margin-right: 2%;
      }
      display: inline-block;
      width: 49%;
      background: #FFFFFF;
      border: 1px solid #D8D8D8;
      border-radius: 2px;
      line-height: 40px;
      font-size: 16px;
      outline: none;
      float: left;
      color: #333333;
      box-sizing: border-box;
      &.edit{
        background: #FF9900;
        color: #FFFFFF;
        border: none 0;
      }
    }
  }

}
</style>
<style>
.weui-dialog{
  border-radius: 12px;
  width: 250px;
  font-size: 16px;
}
.weui-dialog__btn{
  font-size: 16px;
  color: #4499FF;
}
.weui-dialog__ft{
  line-height: 44px
}
.weui-dialog .weui-dialog__bd{
  text-align: left;
  background: #FAFAFA;
  padding: 25px 20px 20px;
}
</style>
